<template>
	<view>
		<view class="navbar">
			<view class="navbartitle">订单详情</view>
			<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon-icon.png"></image>
		</view>
		<view class="background_bg">
			<view style="width: 100%;height: 100rpx;"></view>
			<view v-if="value.status==1" style="font-size: 30rpx;font-weight: bold;color: #ffffff;margin-left: 50rpx;">
				待发货</view>
			<view v-if="value.status==2" style="font-size: 30rpx;font-weight: bold;color: #ffffff;margin-left: 50rpx;">
				发货中</view>
			<view v-if="value.status==3" style="font-size: 30rpx;font-weight: bold;color: #ffffff;margin-left: 50rpx;">
				已完成</view>
		</view>
		<view class="contentbox">
			<!-- 待发货，已发货，收到货 -->
			<view class="deliverybox flex ac">
				<image class="deliverybox_image" src="../../static/news1.png"></image>
				<view class="deliveryview" style="flex: 1;">
					<view style="font-size: 28rpx;color:#5A5A5A;margin-bottom: 20rpx;">订单已经确认，物品准备中</view>
					<view style="font-size: 28rpx;color:#838383;">2024-01-06</view>
				</view>
				<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/right1.png"></image>
			</view>
			<!-- 地址显示 -->
			<view class="address">
				<view class="flex ac">
					<view style="margin-right:20rpx;">黄腾达</view>
					<view>17806752836</view>
				</view>
				<view style="margin-top: 20rpx;">广东省湛江市吴川市海滨区海逸半岛</view>
			</view>
			<!-- 商品 -->
			<view class="commoditybox">
				<view v-for="(item,index) in listdata" class="commoditylist flex ac">
					<image :src="item.picture"></image>
					<view class="commoditytext">{{item.commodity_name}}</view>
					<view class="commoditynum">x1</view>
				</view>
			</view>
			<!-- 订单参数 -->
			<view class="orderbox">
				<view class="orderlist flex ac">
					<view class="ordertitle">订单号</view>
					<view style="flex: 1;">{{value.express_id}}</view>
					<view @click="copy(value.express_id)">复制</view>
				</view>
				<view class="orderlist flex ac">
					<view class="ordertitle">下单时间</view>
					<view>{{value.create_time}}</view>
				</view>
				<view class="orderlist flex ac">
					<view class="ordertitle">订单运费</view>
					<view>{{value.freight==0?'免运费':value.freight}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				value: [],
				id: '',
				listdata: [],
			}
		},

		onLoad(e) {
			this.id = e.id
			this.getorderdata(e.id)
		},

		methods: {
			//返回
			cancela(e){
				uni.navigateBack({
					dalta: 1,
				})
			},
			
			async getorderdata(e) {
				let apply = await request(`${getApp().globalData.http}user/get_order`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					order_id: this.id,
				})
				this.value = apply.data.data
				this.listdata = apply.data.data.commodity
			},
			
			//复制
			copy(e){
				uni.setClipboardData({
					data:e,
					success(res) {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					},
					fail() {
						uni.showToast({
							title:'复制失败',
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.background_bg {
		width: 100%;
		height: 230rpx;
		background-image: url(https://duimianimg.loovee.com/style/img/h5/ukaka/ukaka_h51705493057877/img/ukaka_dd_bg.b33b7f9.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
	}

	.navbartitle {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}

	.contentbox {
		margin-top: -50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	// 待发货，已发货，收到货
	.deliverybox {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 15rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.deliverybox .deliverybox_image {
		width: 80rpx;
		height: 80rpx;
	}

	.deliveryview {
		margin-left: 20rpx;
	}

	// 地址显示
	.address {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	// 商品
	.commoditybox {
		background-color: #ffffff;
		padding: 30rpx 30rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.commoditylist image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
		margin: 20rpx 0;
	}

	.commoditytext {
		margin-left: 20rpx;
		font-size: 28rpx;
		flex: 1;
	}

	.commoditynum {
		font-size: 28rpx;
	}

	//订单参数
	.orderbox {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.orderlist {
		padding: 15rpx 0;
	}

	.ordertitle {
		width: 170rpx;
	}
</style>